<template>
  <div class="content-wrapper">
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="temp"
      label-position="right"
      label-width="90px"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="培训分类">
            <el-select
              v-model="pushClassify"
              :disabled="true"
              placeholder="请选择"
            >
              <el-option
                v-for="item in dataClassify"
                :key="item.tag"
                :label="item.value"
                :value="item.label"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item v-if="audit" label="申请原因">
            <el-input
              v-model.trim="temp.reason"
              type="text"
              placeholder="请输入内容"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item v-if="audit" label="审核人">
            <el-tag
              v-if="auditNameList"
              :disable-transitions="false"
              style="margin-right: 10px"
            >
              {{ auditNameList.userName }}
            </el-tag>

            <el-button
              v-if="propsData.type !== 1"
              size="mini"
              round
              circle
              icon="el-icon-plus"
              @click="openReview(1)"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="培训名称">
        <el-input
          v-model="name"
          :disabled="disabled"
          size="small"
          style="width: 500px"
        />
      </el-form-item>
      <el-form-item label="培训内容">
        <el-input
          v-model="content"
          style="width: 500px"
          type="textarea"
          placeholder="请输入内容"
          maxlength="200"
          show-word-limit
          :disabled="disabled"
        />
      </el-form-item>
      <el-row>
        <el-col :span="8">
          <el-form-item label="培训方式">
            <el-select
              v-model="pushMode"
              :disabled="disabled"
              placeholder="请选择"
            >
              <el-option
                v-for="item in mode"
                :key="item.tag"
                :label="item.value"
                :value="item.label"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="考核方式">
            <el-select
              v-model="pushAssessType"
              placeholder="请选择"
              :disabled="disabled"
            >
              <el-option
                v-for="item in assessType"
                :key="item.tag"
                :label="item.value"
                :value="item.label"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="培训类型">
            <el-select
              v-model="pushType"
              :disabled="disabled"
              placeholder="请选择"
            >
              <el-option
                v-for="item in dataType"
                :key="item.tag"
                :label="item.value"
                :value="item.label"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="培训形式">
            <el-select
              v-model.trim="temp.trainForm"
              placeholder="请选择"
              :disabled="disabled"
            >
              <el-option
                v-for="item in trainForm"
                :key="item.tag"
                :label="item.value"
                :value="item.label"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="培训地点">
            <el-input
              v-model.trim="place"
              :disabled="disabled"
              style="width: 150px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="费用类别">
            <el-select
              v-model.trim="temp.expenseCategory"
              placeholder="请选择"
              :disabled="disabled"
            >
              <el-option
                v-for="item in expenseCategory"
                :key="item.tag"
                :label="item.value"
                :value="item.label"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="预计费用总计">
            <el-input
              v-model.trim="temp.estimatedCost"
              :disabled="disabled"
              style="width: 150px"
            >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="培训讲师" prop="name">
            <el-tag
              v-if="trainerUserName"
              :disable-transitions="false"
              style="margin-right: 10px"
            >
              {{ trainerUserName }}
            </el-tag>
            <el-button
              v-if="propsData.type !== 1"
              size="mini"
              round
              circle
              icon="el-icon-plus"
              @click="openReview(3)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="有无证书">
            <el-radio-group v-model="certificateFlag" :disabled="disabled">
              <el-radio :label="true">有</el-radio>
              <el-radio :label="false">无</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col v-if="certificateFlag" :span="8">
          <el-form-item label="证书名称">
            <el-input
              v-model.trim="temp.certificateName"
              :disabled="disabled"
              style="width: 150px"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="参加部门" prop="name">
        <el-tag
          v-for="(tag, index) in BranchNameList"
          :key="index"
          :closable="closable"
          :disable-transitions="false"
          style="margin-right: 10px"
          @close="BranchList(tag)"
        >
          {{ tag.label }}
        </el-tag>
        <el-button
          v-if="propsData.type !== 1"
          size="mini"
          round
          circle
          icon="el-icon-plus"
          @click="openReview(5)"
        />
      </el-form-item>
      <el-form-item
        v-if="StaffNameList.length > 0"
        label="参加人员"
        prop="name"
      >
        <el-tag
          v-for="(tag, index) in StaffNameList"
          :key="index"
          :closable="closable"
          :disable-transitions="false"
          style="margin-right: 10px"
          @close="StaffList(tag)"
        >
          {{ tag.label }}
        </el-tag>
        <el-button
          v-if="propsData.type !== 1"
          size="mini"
          round
          circle
          icon="el-icon-plus"
          @click="openReview(4)"
        />
      </el-form-item>
      <el-row>
        <el-col :span="8">
          <!-- 选择文件 -->
          <el-form-item label="培训文档">
            <el-tag
              v-for="(tag, index) in SavedataList"
              :key="index"
              :closable="closable"
              :disable-transitions="false"
              style="margin-right: 10px"
            >
              {{ tag.label }}
            </el-tag>
            <el-button
              v-if="propsData.type !== 1"
              size="mini"
              round
              circle
              icon="el-icon-plus"
              @click="SelectFile"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="培训时间">
            <div class="block">
              <el-date-picker
                v-model="Time"
                :disabled="disabled"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00']"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button
          v-if="closable"
          type="primary"
          style="text-align: right"
          @click="pushSaveData"
        >提交</el-button>
      </el-form-item>
    </el-form>

    <SearchPersonnel
      :search-personnel-data="SearchPersonnelData"
      @dataListData="dataListData"
    />
    <SearchUserList
      :search-user-list-data="SearchUserListData"
      @SearchUserList="SearchUserList"
    />
    <SelectGroupList
      :select-group-list-data="SelectGroupListData"
      @UserGroupListData="UserGroupListData"
    />
    <div class="SelectTheFile">
      <SelectFile
        :select-file-data="SelectFileData"
        @SelectFileDataLsit="SelectFileDataLsit"
      />
    </div>
  </div>
</template>

<script>
import SearchPersonnel from '@/components/SearchUser/SearchPersonnel.vue'
import SearchUserList from '@/components/SearchUserList/index'
import SelectGroupList from '@/components/SelectGroupList/index.vue'
import SelectFile from '@/views/train/components/SelectFile/index.vue'
import SelectTheFile from '@/components/SelectTheFile/index.vue'
import { Redact, getMyLookData } from '@/api/ts/train.js'
import { getListItem } from '@/api/base/dict.js'
export default {
  components: {
    SelectTheFile,
    SearchUserList,
    SelectGroupList,
    SearchPersonnel,
    SelectFile
  },
  filters: {
    modeFilters(val) {
      return val == 0
        ? '自学'
        : val == 1
          ? '实操'
          : val == 2
            ? '试题考核'
            : 'ii'
    }
  },
  props: ['propsData'],
  data() {
    return {
      title: '',
      dialogReview: false,
      mode: [],
      dataType: [],
      assessType: [],
      dataClassify: [],
      pushMode: '',
      pushType: '',
      temp: {
        trainClassify: '',
        SaveDataList: '',
        trainForm: '',
        expenseCategory: ''
      },
      rules: {},
      reviewData: [],
      receiveUserGroupList: [],
      reviewNameList: [],
      headList: [],
      category: '',
      trainerUserName: '',
      TeacherIdList: [],
      BranchNameList: [],
      BranchIdList: [],
      StaffNameList: [],
      StaffIdList: [],
      SelectTheFileData: {},
      SavedataList: [],
      Time: '',
      name: '',
      documentIds: [],
      content: '',
      closable: true,
      disabled: false,
      type: '',
      trainId: '',
      // 优化
      SelectGroupListData: {},
      SearchPersonnelData: {},
      SearchUserListData: {},
      SelectFileData: {},
      place: '',
      pushClassify: '',
      audit: false,
      auditNameList: '',
      pushAssessType: '',
      certificateFlag: false,
      trainClassify: [],
      SaveDataList: [],
      trainForm: [],
      expenseCategory: [],
      SaveIdList: []
    }
  },
  watch: {
    propsData(newData) {
      this.type = newData.type
      if (this.type == 1) {
        this.closable = false
        this.disabled = true
      } else if (this.type == 2) {
        this.closable = true
        this.disabled = false
      }
      this.trainId = newData.trainId
      this.LookDataList()
    },
    // 培训审核人
    pushClassify(data) {
      if (data.indexOf('train_common') == 0) {
        this.audit = true
      } else {
        this.audit = false
      }
    }
  },
  mounted() {
    this.trainId = this.propsData.trainId
    if (this.propsData.type == 1) {
      this.closable = false
      this.disabled = true
    } else if (this.propsData.type == 2) {
      this.closable = true
      this.disabled = false
    }
    this.LookDataList()
    if (this.$route.params.data) {
      this.getDocumedata()
    }
    this.getListItems()
  },
  methods: {
    // 获取培训方式
    async getListItems() {
      const { data } = await getListItem({
        dictGroupCodes: [
          'train',
          'train_type',
          'assess_method',
          'train_method',
          'train_form',
          'expense_category'
        ]
      })
      data.forEach((item) => {
        console.log(item)
        if (item.value.indexOf('培训方式') != -1) {
          this.mode = item.children
        } else if (item.value.indexOf('培训分类') != -1) {
          this.dataClassify = item.children
        } else if (item.value.indexOf('培训类型') != -1) {
          this.dataType = item.children
        } else if (item.value.indexOf('考核方式') != -1) {
          this.assessType = item.children
        } else if (item.value.indexOf('培训形式') != -1) {
          this.trainForm = item.children
        } else if (item.value.indexOf('费用类别') != -1) {
          this.expenseCategory = item.children
        }
      })
      // this.dataClassify = dataClassify.data

      // let dataType = await getListItem({
      //   dictGroupCode: 'train_type  '
      // })
      // this.dataType = dataType.data

      // let assessType = await getListItem({
      //   dictGroupCode: 'assess_method'
      // })
      // this.assessType = assessType.data
    },

    // 参与查看获取数据
    async LookDataList() {
      const { data } = await getMyLookData({ trainId: this.propsData.trainId })
      this.TeacherIdList = data.trainerUserId
      this.name = data.name
      this.content = data.content
      this.pushMode = data.mode
      this.pushType = data.type
      this.trainerUserName = data.trainerUserName
      this.Time = [data.startTime, data.endTime]
      this.SavedataList = data.trainDocumentRelResponses
      this.BranchNameList = data.trainUserGroupResponses
      this.StaffNameList = data.trainUserResponses
      this.pushClassify = data.trainClassify
      this.pushAssessType = data.assess
      this.temp = data
      this.place = data.trainSite
      this.StaffIdList = this.ids(data.trainUserResponses, this.StaffIdList)
      this.BranchIdList = this.ids(
        data.trainUserGroupResponses,
        this.BranchIdList
      )
      this.SaveIdList = this.ids(
        data.trainDocumentRelResponses,
        this.SaveIdList
      )
    },
    // 操作培训教师tag标签
    TeacherList(tag) {
      this.trainerUserName.splice(this.trainerUserName.indexOf(tag), 1)
      this.TeacherIdList.splice(this.TeacherIdList.indexOf(tag), 1)
    },
    // 培训部门
    BranchList(tag) {
      this.BranchNameList.splice(this.BranchNameList.indexOf(tag), 1)
      this.BranchIdList.splice(this.BranchIdList.indexOf(tag), 1)
    },
    // 培训人员
    StaffList(tag) {
      this.StaffNameList.splice(this.StaffNameList.indexOf(tag), 1)
      this.StaffIdList.splice(this.StaffIdList.indexOf(tag), 1)
    },
    // 选择文件
    SelectTheFile() {
      this.SelectTheFileData = {
        dialog: true
      }
    },
    pushSaveData() {
      const dataList = {
        content: this.content,
        endTime: this.Time[1],
        mode: this.pushMode,
        name: this.name,
        startTime: this.Time[0],
        type: this.pushType,
        participateGroupId: this.BranchIdList,
        participateUserId: this.StaffIdList,
        trainerUserId: this.TeacherIdList,
        documentIds: this.SaveIdList,
        trainId: this.trainId,
        assess: this.pushAssessType, // 考核方式
        trainForm: this.pushMode, // 培训形式
        expenseCategory: this.temp.expenseCategory, // 费用类别
        estimatedCost: this.temp.estimatedCost, // 预估费用
        certificateName: this.temp.certificateName, // 证书名称
        certificateFlag: this.certificateFlag, // 有无证书：0-无证书，1-有证书
        trainSite: this.place // 培训地点
      }

      Redact(dataList).then((res) => {
        if (res.code == 1) {
          this.$emit('emitData', res.code)
          this.$message({
            message: '编辑成功',
            type: 'success'
          })
          this.$router.push('/train/train_list_participant')
        }
      })
    },
    // =========================================
    // 选择部门（多选）
    UserGroupListData(data) {
      this.BranchNameList = data
      data.forEach((item) => {
        this.BranchIdList.push(item.id)
      })
    },
    // 选择人员（多选）
    SearchUserList(data) {
      this.StaffNameList = data
      data.forEach((item) => {
        this.StaffIdList.push(item.id)
      })
    },
    // 选择人员（单选）
    dataListData(data) {
      if (data) {
        this.trainerUserName = data[0].label
        this.TeacherIdList = data[0].id
      }
    },
    // 选择文件
    SelectFile() {
      this.SelectFileData = {
        deleteDialog: true,
        treeData: this.SavedataList
      }
    },
    SelectFileDataLsit(data) {
      this.SavedataList.splice(1)
      this.SavedataList = [...this.SavedataList, ...data]
      this.SavedataList = Array.from(new Set(this.SavedataList))
    },
    openReview(val, type, title) {
      // 0为角色 1为角色（总经理，总监） 3为架构 4为架构多选 5部门多选
      this.reviewWindow = val
      if (val == 3) {
        this.SearchPersonnelData = {
          dialogVisible: true
        }
      } else if (val == 4) {
        this.SearchUserListData = {
          dialogVisible: true
        }
      } else if (val == 5) {
        this.SelectGroupListData = {
          dialogVisible: true,
          temp: this.BranchNameList
        }
      }
    },
    ids(row, data) {
      row.forEach((item) => {
        data.push(item.id)
      })
      const dataList = [...new Set(data)]
      return dataList
    }
  }
}
</script>

<style lang="scss" scoped>
//
.buttonleft {
  margin-left: 85%;
}
.buttonup {
  margin-right: 10px;
  font-size: 12px;
  padding: 10px 20px;
}
.inline-block {
  display: inline-block;
}
.tag {
  margin-left: 10px;
}
.active {
  display: none;
}
.inner-container {
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
}

.left-container {
  width: calc(100% - 300px);
}

.right-container {
  width: 300px;

  .el-timeline {
    .el-timeline-item {
      height: 56px;
      line-height: 56px;

      p {
        height: 16px;
        line-height: 16px;
        font-size: 13px;
      }
    }
  }
}
</style>
